<template>
  <div>
    <el-table v-loading="loading" :data="tableData" style="width: 100%" @sort-change="sortTable">
      <el-table-column prop="cinemaName" label="影院名"></el-table-column>
      <el-table-column prop="brandName" label="所属品牌"></el-table-column>
      <el-table-column prop="brandPic" label="影院图片">
        <template slot-scope="scope">
          <el-image :src="scope.row.brandPic" :preview-src-list="[scope.row.brandPic]">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="mname" label="所属商圈"></el-table-column>
      <el-table-column prop="upvote" label="点赞数"></el-table-column>
      <el-table-column prop="state" label="影院状态"></el-table-column>
      <el-table-column prop="insertTime" label="添加时间"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间"></el-table-column>
      <el-table-column prop="sort" label="排序" sortable></el-table-column>
      <el-table-column label="操作" style="width: 240px">
        <template slot-scope="scope">
          <el-button style="margin-left: 0;margin-top: 5px" type="primary" size="mini" @click="handleEdit(scope)">编辑</el-button>
          <el-button style="margin-left: 0;margin-top: 5px" type="primary" size="mini" @click="findOrders(scope.row.id)">查找影院订单</el-button>
          <el-button style="margin-left: 0;margin-top: 5px" size="mini" type="danger" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePage"
        :current-page.sync="pageNum">
    </el-pagination>
    <el-dialog title="编辑" :visible.sync="dialogVisible" center>
      <el-form v-loading="changeLoading" :model="editForm" label-width="80px" ref="form">
        <el-form-item label="影院名" prop="cinemaName">
          <el-input maxlength="50" v-model="editForm.cinemaName"></el-input>
        </el-form-item>
        <el-form-item label="所属品牌" prop="brandName">
          <el-select v-model="brandValue" :placeholder="brandValue2">
            <el-option
                v-for="item in brandOptions"
                :key="item.id"
                :label="item.brandName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影院图片" prop="brandPic">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8081/manage/cinema/uploadPicture"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="所属商圈" prop="mname">
          <el-select v-model="mallValue" :placeholder="mallValue2">
            <el-option
                v-for="item in mallOptions"
                :key="item.id"
                :label="item.mname"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="editForm.address" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="影院介绍" prop="introduce">
          <el-input v-model="editForm.introduce" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="营业时间" prop="businessTime">
          <el-input v-model="editForm.businessTime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="歇业时间" prop="closingTime">
          <el-input v-model="editForm.closingTime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-input v-model="editForm.createTime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="点赞数" prop="upvote">
          <el-input v-model="editForm.upvote" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="影院状态" prop="state">
          <el-input v-model="editForm.state" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="添加时间" prop="insertTime">
          <el-input v-model="editForm.insertTime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="修改时间" prop="updateTime">
          <el-input v-model="editForm.updateTime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="editForm.sort" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitChanges('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {getBrandInfo, getMallInfo} from "@/api";

export default {
  data() {
    return {
      imageUrl: void 0,
      changeLoading: true,
      loading: true,
      tableData: [],
      tableDateCopy: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      dialogVisible: false,
      editForm: {},
      rules: [],
      brandOptions: [],
      mallOptions: [],
      brandValue: '',
      mallValue: '',
      mallValue2: '',
      brandValue2: '',
      dialogImageUrl: '',
      imgDialogVisible: false,
      disabled: false,
      brandPic:''
    };
  },
  methods: {
    handleAvatarSuccess(res,file) {
      this.brandPic = res.msg;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 删除
    handleDelete(scope) {
      this.$confirm('确定删除嘛?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('manage/cinema/deleteCinema', {
          params: {
            id: scope.row.id
          }
        }).then(response => {
          if (response.data.code == 200){
            // 丛数组中删除
            this.tableData.splice(scope.$index, 1)
            this.tableDateCopy = [...this.tableData]
            this.$message.success('删除成功');
          }else {
            this.$message.error('删除失败');
          }
        }).catch(error => {
          console.log(error)
          this.$message.error('服务异常，请联系管理员或稍后再试');
        })
      }).catch(() => {});
    },
    // 编辑
    handleEdit(scope) {
      let row = scope.row;
      this.dialogVisible = true;
      this.brandValue2 = row.brandName
      this.mallValue2 = row.mname
      this.imageUrl = void 0
      this.getCinemaDetailed(row.id)
      this.getBrandList()
      this.getMallList()
    },
    // 提交修改
    submitChanges(formName) {
      console.log(this.editForm);
      this.changeLoading = true
      axios.post('/manage/cinema/updateCinema', {
        id: this.editForm.id,
        cinemaName: this.editForm.cinemaName,
        brandId: this.brandValue,
        mallId: this.mallValue,
        brandPic:this.brandPic
      })
          .then(response => {
            this.ChangeLoading = false;
            let data = response.data;
            // 修改失败
            if (data.code !== 200) {
              this.$message.error(data.msg);
              return;
            }
            // 修改成功
            this.$message({
              message: data.msg,
              type: 'success'
            });
            this.dialogVisible = false
            this.getCinemaList()
          })
          .catch(error => {
            this.ChangeLoading = false;
            console.log(error)
            this.$message.error('系统异常，请联系管理员或稍后再试');
          })
          .finally(() => this.changeLoading = false);
    },
    // 获取商圈信息
    getMallList() {
      getMallInfo().then(response => {
        if (response.data.code === 200) {
          this.mallOptions = response.data.data
        } else {
          this.$message.error(response.data.msg)
        }
      }).catch(err => console.log(err))
    },
    // 获取品牌信息
    getBrandList() {
      getBrandInfo().then(response => {
        if (response.data.code === 200) {
          this.brandOptions = response.data.data
        } else {
          this.$message.error(response.data.msg)
        }
      }).catch(err => console.log(err))
    },
    // 获取影院详细信息
    getCinemaDetailed(id) {
      this.editForm = {}
      this.changeLoading = true
      axios.get("manage/cinema/getDetailed", {
        params: {
          id
        }
      }).then(response => {
        if (response.data.code === 200) {
          this.editForm = response.data.data;
        } else {
          this.$message.error(response.data.msg)
        }
      }).catch(err => console.log(err))
          .finally(() => this.changeLoading = false);
    },
    // 列表排序
    sortTable({prop, order}) {
      // prop: 排序的字段
      // order: 排序的顺序，ascending/descending/null
      if (order === "ascending") {
        // 升序排序
        this.tableData.sort((a, b) => this.sortName(a[prop], b[prop]));
      } else if (order === "descending") {
        // 降序排序
        this.tableData.sort((a, b) => this.sortName(b[prop], a[prop]));
      } else {
        // 不排序，恢复原始顺序
        this.tableData = [...this.tableDateCopy];
      }
    },
    // 排序
    sortName(a, b) {
      if (a < b) return -1;
      if (a > b) return 1;
      return 0;
    },
    // 获取影厅列表
    getCinemaList() {
      axios.get('/manage/cinema/getCinemaInfo', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
      }).then(response => {
        let res = response.data.data;
        if (response.data.code === 200) {
          // 总条数
          this.total = res.total
          // 清空数组
          this.tableData.length = 0
          // 拷贝 tableDate 到 tableDateCopy
          res.list.forEach(item => this.tableData.push(item))
          this.tableDateCopy = [...this.tableData];
        } else {
          this.$message.error(response.data.msg)
        }
      }).catch(error => {
        console.log(error)
      }).finally(() => this.loading = false)
    },
    handlePage() {
      this.loading = true
      this.getCinemaList()
    },
    findOrders(id){
      this.$router.push({path:"/orders/list",query:{
          screeningId:id
        }})
    }
  },
  created() {
    // 获取初始数据
    this.getCinemaList();
  }
}
</script>

<style scoped>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>